<!DOCTYPE html>
<!-- 支付页 -->
<!-- @author DHC -->
<!-- 2020/04/25 -->
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no viewport-fit=cover" />
		<script src="../../Common/js/tools.js"></script>
		<script src="../../Common/js/jump.js"></script>
		<script src="../../Common/js/lib/jquery-3.4.1.min.js"></script>
		<script src="../../Common/js/lib/materialize.min.js"></script>
		<link rel="stylesheet" href="../../Common/css/ufun.css" />
		<link rel="stylesheet" href="../../Common/css/lib/materialize.min.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
		<style>
			#Reward {
				display: block;
				width: max-content;
				margin: 5vw auto;
			}
			
			.reward-btn {
				display: inline-block;
				margin: 0 2vw;
				padding: 1vw 0;
				text-align: center;
				font-size: 4vw;
				width: 20vw;
				color: var(--color-black);
				background-color: var(--color-white);
				border: 1px solid var(--color-black);
				border-radius: 2vw;
			}
			
			.reward-btn.active {
				color: var(--color-yellow);
				border: 1px solid var(--color-yellow);
			}
			
			#Money {
				width: 100vw;
				text-align: center;
			}
			
			#Money::before {
				content: "¥";
				font-size: 8vw;
				color: var(--color-yellow);
			}
			
			#MoneyInput {
				width: 29vw;
				/* height: 10.5vw; */
				font-size: 8vw;
				outline: none;
				border-style: none;
				border-bottom: 1px solid var(--color-yellow);
				text-align: center;
				color: var(--color-yellow);
			}
			
			#MoneyInput:focus {
				box-shadow: none;
			}
			
			#MoneyInput::placeholder {
				color: var(--color-gray-light);
			}
			
			.pay-way {
				width: 100vw;
				padding: 0 5vw;
				margin: 0;
			}
			
			.pay-way * {
				display: block;
			}
			
			.pay-card {
				padding: 3vw 0;
				font-size: 5vw;
				width: 100%;
				height: 14vw;
				margin: 0;
				border-bottom: 1px solid var(--color-gray-light);
				margin-bottom: 4vw;
			}
			
			.pay-pic {
				float: left;
				width: 9vw;
				height: 9vw;
				margin-right: 3vw;
			}
			
			.pay-btn {
				float: right;
				width: 7vw;
				height: 7vw;
				margin-top: 1vw;
				background-image: url(img/btn-select0.png);
				background-position: center;
				background-size: contain;
			}
			
			.pay-btn.active {
				background-image: url(img/btn-select1.png);
			}
		</style>
	</head>
	<body>
		<header style="opacity: 1;">
			<div id="Left" class="com-btn" onmouseup="ThisBack();">
				<i class="material-icons">keyboard_arrow_left</i>
			</div>
			<div id="Title">设置悬赏</div>
			<div id="Right" class="com-btn" onmouseup="nextPage();">支付</div>
		</header>
		<div class="content">
			<div id="Reward">
				<div onclick="rewarding(true);" class="reward-btn active" id="BTN0">悬赏</div>
				<div onclick="rewarding(false);" class="reward-btn" id="BTN1">无悬赏</div>
			</div>
			<div id="Paid">
				<div id="Money">
					<!-- <p id="MoneySign">¥</p> -->
					<input type="number" id="MoneyInput" size="2" placeholder="0.00" onKeyUp="amount(this)" onBlur="overFormat(this)" />
				</div>
				<div class="pay-way">
					<div class="pay-card" onclick="changeOption(0);">
						<img src="img/icon-pay-upay.png" class="pay-pic" alt="">
						Ufun支付
						<div class="pay-btn" id="Pay0"></div>
					</div>
					<div class="pay-card" onclick="changeOption(1);">
						<img src="img/icon-pay-wechat.png" class="pay-pic" alt="">
						微信支付
						<div class="pay-btn" id="Pay1"></div>
					</div>
				</div>
				<div class="center" style="color: var(--color-gray-medium);">
					<p>您需要支付悬赏金额才能开启此问题</p>
					<p>最终作答者将获得相应的悬赏</p>
				</div>
			</div>
			<div id="Free">
				<div class="center" style="color: var(--color-gray-medium);">
					<p>您的提问是无悬赏的</p>
					<p>无需支付悬赏金额</p>
				</div>
			</div>
		</div>
	</body>
	<script>
		var userHash, current;
		var activePayWay = 0;
		var money;
		var btn0 = $("#BTN0")[0];
		var btn1 = $("#BTN1")[0];
		var haveReward = true;
		
		document.addEventListener('plusready', function() {
			GetStatusTop();
			userHash = plus.storage.getItem("userHash");
			current = plus.webview.currentWebview();
			DoShow(current);
		});
		
		//-------------------------
		//  选择选项
		//-------------------------
		function changeOption(index) {
			ID('Pay' + activePayWay).classList.remove('active');
			activePayWay = index;
			ID('Pay' + activePayWay).classList.add('active');
		}
		changeOption(0);
		
		function rewarding(flag) {
			if (flag) {
				btn0.classList.add('active');
				btn1.classList.remove('active');
				ID('Free').style.display = 'none';
				ID('Paid').style.display = 'block';
			} else {
				btn1.classList.add('active');
				btn0.classList.remove('active');
				ID('Free').style.display = 'block';
				ID('Paid').style.display = 'none';
			}
			haveReward = flag;
		}
		rewarding(true);
		
		//-------------------------
		//  支付与发布问题
		//-------------------------
		function nextPage() {
			submit();
		}
		function submit() {
			money = ID("MoneyInput").value;
			if (money.trim() == "")
				money = 0;
			if (haveReward) {
				if (money === 0) {
					plus.nativeUI.alert("悬赏金额不能为0！", "确认悬赏");
					return;
				}
			} else {
				money = 0;
			}
	
			CallAJAX("changeQues", {
				"userHash": userHash,
				"quesTitle": current.title,
				"quesText": current.content,
				"quesReward": parseFloat(money),
				"action": "write"
			}, function(data) {
				switch (data["res"]) {
					case "1":
						plus.nativeUI.alert("请确认支付或检查您的账户余额！", "支付失败");
						break;
					case "ok":
						OpenWebView('3.html', 'NewQues3', {}, {
							"quesId": data["quesId"]
						});
						break;
					default:
						plus.nativeUI.alert("发生未知错误！", "发布失败");
						break;
				}
			});
		}
		
		//---------------------------------------------------
		// 处理金钱输入框 用的轮子
		//---------------------------------------------------
		// 控制输入金额
		function amount(th) {
			var regStrs = [
				['^0(\\d+)$', '$1'], //禁止录入整数部分两位以上，但首位�?  
				['[^\\d\\.]+$', ''], //禁止录入任何非数字和点 �?					        
				['\\.(\\d?)\\.+', '.$1'], //禁止录入两个以上的点  
				['^(\\d+\\.\\d{2}).+', '$1'] //禁止录入小数点后两位以上  
			];
			for (var i = 0; i < regStrs.length; i++) {
				var reg = new RegExp(regStrs[i][0]);
				th.value = th.value.replace(reg, regStrs[i][1]);
			}
		}
		// 录入完成后，输入模式失去焦点后对录入进行判断并强制更改，并对小数点补全  
		function overFormat(th) {
			var v = th.value;
			if (v === '' || parseFloat(v) === 0) {
				v = '';
			} else if (/^0+\d+\.?\d*.*$/.test(v)) {
				v = v.replace(/^0+(\d+\.?\d*).*$/, '$1');
				v = inp.getRightPriceFormat(v).val;
			} else if (/^0\.\d$/.test(v)) {
				v = v + '0';
			} else if (!/^\d+\.\d{2}$/.test(v)) {
				if (/^\d+\.\d{2}.+/.test(v)) {
					v = v.replace(/^(\d+\.\d{2}).*$/, '$1');
				} else if (/^\d+$/.test(v)) {
					v = v + '.00';
				} else if (/^\d+\.$/.test(v)) {
					v = v + '00';
				} else if (/^\d+\.\d$/.test(v)) {
					v = v + '0';
				} else if (/^[^\d]+\d+\.?\d*$/.test(v)) {
					v = v.replace(/^[^\d]+(\d+\.?\d*)$/, '$1');
				} else if (/\d+/.test(v)) {
					v = v.replace(/^[^\d]*(\d+\.?\d*).*$/, '$1');
					ty = false;
				} else if (/^0+\d+\.?\d*$/.test(v)) {
					v = v.replace(/^0+(\d+\.?\d*)$/, '$1');
					ty = false;
				} else {
					v = '';
				}
			}
			th.value = v;
		}
	</script>
</html>
